import React from 'react';
import styles from './index.less';
import type { IProps } from '@/components/CustomElement/RankList/interface';
// 排行
const RankList: React.FC<IProps> = (props) => {
    const { data } = props;
    const color = {
        normal: '#f8f8f8',
        success: '#52C41A',
        primary: '#1890FF',
        transparent: 'transparent',
        error: '#ff4d4f',
    };

    const borderRadius = {
        circle: '50%',
        fillet: '25%',
        square: '0%',
    };

    const {
        title: rank_title,
        content: rank_content,
        list = [],
        iconColor = 'error',
        normalIconColor = '#f0f0f0',
        iconShape = 'circle',
        keynote = 3,
        headerStyle = {
            background: color[data?.header_type ?? 'normal'],
        },
        rankingStyle,
        nameStyle,
        numberStyle,
        rowKey,
    } = data;

    return (
        <div className={styles.rank}>
            <div className={styles.rank_header} style={headerStyle}>
                <span>{rank_title}</span>
                <span>{rank_content}</span>
            </div>

            <div className={styles.rank_list}>
                {list.map((item, index) => {
                    return (
                        <ul className={styles.rank_list_item} key={rowKey ? item[rowKey] : index}>
                            <li className={styles.rank_list_item_li}>
                                <div className={styles.rank_list_item_content}>
                                    <span
                                        className={styles.rank_list_item_icon}
                                        style={{
                                            borderRadius: borderRadius[iconShape],
                                            backgroundColor:
                                                keynote > index
                                                    ? color[iconColor] ?? iconColor
                                                    : normalIconColor,
                                            color: keynote > index ? color.normal : 'black',
                                            ...rankingStyle,
                                        }}
                                    >
                                        {index + 1}
                                    </span>
                                    <span style={{ ...nameStyle }}>{item?.name}</span>
                                </div>
                                <span style={{ ...numberStyle }}>{item?.number}</span>
                            </li>
                        </ul>
                    );
                })}
            </div>
        </div>
    );
};

export default RankList;
